<template>
  <div class="card">
    <a-form-model  :model="statisticsSearch" layout="inline" >
      <a-form-model-item >
        <a-select  allowClear v-model="channelid" style="width: 150px;" @change="channelChange" placeholder="计划通道">
          <a-select-option v-for="(item,index) in channelArrs" :key="index" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item  v-if="channelid">
        <a-select allowClear v-model="bankid" style="width: 180px;" placeholder="银行名称">
          <a-select-option v-for="(item,index) in banksArrs" :key="index" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item  v-else>
        <a-input v-model="bankname" allowClear style="width: 180px;" placeholder="银行名称"></a-input>
      </a-form-model-item>
      <a-form-model-item >
        <a-select v-model="statisticsSearch.trade_type" style="width: 150px;" placeholder="请选择类型">
          <a-select-option :value="1">消费</a-select-option>
          <a-select-option :value="2">还款</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item >
        <a-select v-model="statisticsSearch.trade_status" style="width: 150px;" placeholder="请选择类型">
          <a-select-option value="C">成功</a-select-option>
          <a-select-option value="B">未执行</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item >
        <!-- <a-range-picker :value="[statisticsSearch.start_time,statisticsSearch.end_time]"></a-range-picker> -->
        <a-range-picker v-model="time"
          :show-time="{ format: 'HH:mm:ss' }"
          format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss"
          :placeholder="['Start Time', 'End Time']" @ok="pickerSuccer"
        />
      </a-form-model-item>
      <a-form-model-item >
        <a-button type="primary" @click="getDataList">查询</a-button>
      </a-form-model-item>
      <a-form-model-item >
        <a-button type="primary" @click="resters">重置</a-button>
      </a-form-model-item>
    </a-form-model >
    
    <a-spin :spinning="loading" >
      <a-table
        bordered
        :columns="columns"
        :data-source="tableData"
        :rowKey="(record, index) => index"
        :pagination="pagination"
        @change="pagination=$event,getDataList()"
      >
      </a-table>
    </a-spin>
  </div>
</template>

<script>
import { getRepaymentApi,getChannelSelectPage,getBankSelectPage } from '@/api/statistics.js'
import moment from 'moment';
export default {
  name: 'BankTurnover',
  components: {
  },
  data() {
    return {
      loading: false,
      bankname:'',
      bankid:"",
      channelid:"",
      time:[moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')],
      statisticsSearch:{
        end_time:moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
        start_time:moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        trade_status:"C",
        trade_type:1,
      },
      channelArrs:[],
      banksArrs:[],
      tableData: [],
      pagination:false,
      columns: [
        {
          title: '通道名称',
          dataIndex: 'channel_name',
          align: 'center'
        },
        {
          title: '银行名称',
          dataIndex: 'bank_name',
          align: 'center',
        },
        {
          title: '交易类型',
          dataIndex: 'trade_type',
          align: 'center',
        },
        {
          title: '当日初始银行交易量',
          dataIndex: 'daily_bank_turnover',
          align: 'center',
        },
        {
          title: '交易状态',
          dataIndex: 'trade_status',
          align: 'center',
        },
        {
          title: '交易量',
          dataIndex: 'trade_amount',
          align: 'center',
        }
      ]
    }
  },
  created() {
    this.getDataList()
    this.getchannelData()
  },
  computed:{
  },
  methods: {
    resters(){
      this.bankname=''
      this.bankid=""
      this.channelid=""
      this.time=[moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')]
      this.pickerSuccer()
    },
    pickerSuccer(){
      this.statisticsSearch.start_time=this.time[0]
      this.statisticsSearch.end_time=this.time[1]
    },
    getchannelData(){
      getChannelSelectPage({
        brand_id: process.env.VUE_APP_BRAND_ID,
        statisticsSearch:{
          type:1
        }
      }).then(res=>{
        this.channelArrs=res.data
      })
    },
    channelChange(){
      this.banksArrs=[]
      this.bankid=""
      this.bankname=""
      if(this.channelid){
        getBankSelectPage({
        brand_id: process.env.VUE_APP_BRAND_ID,
          statisticsSearch:{
            from:'repayment',
            channel_id:this.channelid
          }
        }).then(res=>{
          this.banksArrs=res.data
        })
      }
    },


    async getDataList() {
      this.loading = true
      try {
        var json={
          order: "desc",
          order_by: "id",
          page:  '1',
          page_size: 50,
          search:{ 
            brand_id: Number(process.env.VUE_APP_BRAND_ID),
            ...this.statisticsSearch
          }
        }
        if(this.channelid){
          json.search.channel_id=this.channelid
        }
        if(this.bank_id){
          json.search.bank_id=this.bankid
        }
        if(this.bankname){
          json.search.bank_name=this.bankname
        }
        const { data } = await getRepaymentApi(json)
        this.tableData = data
      } finally {
        this.loading = false
      }
    },
  }
}
</script>

<style lang="less" scoped>
</style>
